﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    MasterPageFile="MasterPages/MasterPage.master" %>

<%@ Register TagPrefix="same" Namespace="Sketchial.UIProcess.CustomControls" Assembly="Sketchial.UIProcess" %>
<%@ Register Src="~/Controls/ProfileBox.ascx" TagName="ProfileBox" TagPrefix="same" %>
<%@ Register Src="~/Controls/PostsBox.ascx" TagName="PostsBox" TagPrefix="same" %>
<%@ Register Src="~/Controls/TopBar.ascx" TagName="TopBar" TagPrefix="same" %>
<%@ Register Src="~/Controls/ShareBox.ascx" TagName="ShareBox" TagPrefix="same" %>
<%@ Register Src="~/Controls/DragAndDrop.ascx" TagName="DND" TagPrefix="same" %>
<asp:Content ID="Header" runat="server" ContentPlaceHolderID="HeaderPlaceHolder">
    <style type="text/css">
        ul
        {
            list-style: none;
            padding: 0;
        }
        
        
        #menu14 li a
        {
            height: 32px;
            voice-family: "\"}\"";
            voice-family: inherit;
            height: 24px;
            text-decoration: none;
            border-bottom: 1px solid #ccc;
        }
        
        #menu14 li a:link, #menu14 li a:visited
        {
            color: #333;
            display: block;
            padding: 8px 0 0 10px;
            background-image: url(./assets/images/menu14_on.gif);
        }
        
        #menu14 li a:hover
        {
            color: #303030;
            background-image: url(./assets/images/menu14.gif);
            padding: 8px 0 0 10px;
        }
    </style>
    <script>
        $("#download_now").tooltip({ effect: 'slide' });
    </script>
    <style type="text/css">
        /* clicked state */
        #download_now:focus
        {
            background-position: 0 -88px;
        }
        
        /* tooltip styling */
        .tooltip
        {
            display: none;
            background: url(./assets/images/feather.png);
            height: 163px;
            padding: 40px 30px 10px 30px;
            width: 310px;
            font-size: 11px;
            color: #fff;
        }
        
        /* a .label element inside tooltip */
        .tooltip .label
        {
            color: yellow;
            width: 35px;
        }
        
        .tooltip a
        {
            color: #ad4;
            font-size: 11px;
            font-weight: bold;
        }
    </style>
    <script>


        window.fbAsyncInit = function () {
            debugger;
            FB.init({
                appId: '299063453508126', // App ID
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true  // parse XFBML
            });

            // Additional initialization code here

        };

        // Load the SDK Asynchronously
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        } (document));
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            LoadPosts('PageLoad');
        });

    </script>
</asp:Content>
<asp:Content ID="TopBar" runat="server" ContentPlaceHolderID="TopBarContent">
    <asp:HiddenField ID="hdnFB" runat="server" Value="0" />
    <same:TopBar ID="topBarControl" runat="server" />
</asp:Content>
<asp:Content ID="ShareBox" runat="server" ContentPlaceHolderID="ShareBoxContent">
    <div>
    </div>
</asp:Content>
<asp:Content ID="LeftSide" runat="server" ContentPlaceHolderID="LeftSideContent">
    <same:ProfileBox ID="asd" runat="server"></same:ProfileBox>
    <same:BoxPanel ID="ExtraBox1" runat="server">
        <div id="menu14">
            <ul>
                <li><a href="#" onclick="LoadPosts('LeftBar')">Events</a></li>
                <li><a href="#" onclick="LoadFriends()">Friends</a></li>
                <li><a href="#" onclick="LoadLocations()">Locations</a></li>
            </ul>
        </div>
    </same:BoxPanel>
    <same:BoxPanel ID="ExtraBox2" runat="server">
        <!-- trigger element. a regular workable link -->
        <a id="download_now">Sketchial</a>
        <!-- tooltip element -->
        <div class="tooltip">
            <img src="../assets/images/profile.jpg" alt="Flying screens" style="float: left;
                margin: 0 15px 20px 0" />
        </div>
    </same:BoxPanel>
</asp:Content>
<asp:Content ID="RightSide" runat="server" ContentPlaceHolderID="RightSideContent">
    <same:PostsBox ID="ProfileBox1" runat="server"></same:PostsBox>
    <%--<div id="inline-1" class="hide" style="display: none; width: 800px;">
        <div id="ProfileDiv" style="width: 800px; height: 600px;">
        </div>
    </div>--%>
</asp:Content>
<asp:Content ID="Footer" runat="server" ContentPlaceHolderID="FooterContent">
    <script type="text/javascript" charset="utf-8">

        $('#Profiler').fancybox({
            'titlePosition': 'inside',
            'transitionIn': 'none',
            'transitionOut': 'none'
        });
        $('#DNDer').fancybox({
            'titlePosition': 'inside',
            'transitionIn': 'none',
            'transitionOut': 'none'
        });
        $('#DNDAreaOpener').fancybox({
            'titlePosition': 'inside',
            'transitionIn': 'none',
            'transitionOut': 'none'
        });
        $("#various3").fancybox({
            'width': '90%',
            'height': '60%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
        });
    </script>
    <script type="text/javascript">
        function dateChange(formated) {
            debugger;
            var date = $('#inputDate').val();
            var day = date.split('/')[1];
            var month = date.split('/')[0];
            var year = date.split('/')[2];
            $('#dtDay').html(day);
            $('#dtMonth').html(month);
            $('#dtYear').html(year);
        }


        $('#inputDate').DatePicker({
            format: 'm/d/Y',
            date: $('#inputDate').val(),
            current: $('#inputDate').val(),
            starts: 1,
            position: 'r',
            onBeforeShow: function () {
                $('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
            },
            onChange: function (formated, dates) {
                alert(formated);
                dateChange(formated);
                $('#inputDate').val(formated);
                $('#inputDate').DatePickerHide();
            }
        }
	);
    </script>
    <div style="display: none;">
        <div id="MyPopUp" style="height: 500px; overflow: auto;">
        </div>
    </div>
    <div style="display: none;">
        <div id="DNDArea" style="width: 1200px;">
            <same:DND ID="MyDND" runat="server" />
        </div>
    </div>
    <div id="personPopupContainer" style="display: none;">
        <table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">
            '
            <tr>
                <td class="corner topLeft">
                </td>
                <td class="top">
                </td>
                <td class="corner topRight">
                </td>
            </tr>
            <tr>
                <td class="left">
                    &nbsp;
                </td>
                <td>
                    <div id="personPopupContent">
                    </div>
                </td>
                <td class="right">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td class="corner bottomLeft">
                    &nbsp;
                </td>
                <td class="bottom">
                    &nbsp;
                </td>
                <td class="corner bottomRight">
                </td>
            </tr>
        </table>
    </div>
</asp:Content>
